<template>
	<view class="container">
		<uni-forms ref="reportForm" :modelValue="reportForm">
			<uni-forms-item label-width='100' label="举报原因" required>
				<uni-data-checkbox v-model="reportForm.reason" multiple placeholder="举报原因" :localdata="reasons" />
			</uni-forms-item>
			<uni-forms-item label-width='100' label="举报详述">
				<uni-easyinput type="textarea" v-model="reportForm.describes" placeholder="请描述具体内容" />
			</uni-forms-item>
		</uni-forms>
		<uni-section title="图片凭证" type="line">
			<view class="example-body">
				<imgUpload :max="1" :action="`${uploadUrl}${state}/`" v-model="imageList" @uploadSuccess="uploadSuccess"
					@uploadFail="uploadFail" @imgDelete="imgDelete" :headers="{'Authorization':token}">
				</imgUpload>
			</view>
		</uni-section>
		<!-- <uni-data-checkbox :style="{marginTop:'50px'}" v-model="reportForm.ban" multiple :localdata="ban" />
		<uni-data-checkbox v-model="reportForm.confirm" multiple :localdata="confirm" /> -->
		<button type="primary" @click="submit()">提交</button>

	</view>
</template>

<script>
	import imgUpload from '@/components/htz-image-upload/htz-image-upload.vue'
	import {
		url,
		request,
		login
	} from '@/service/api.js'
	export default {
		data() {
			return {
				reportId: '',
				token: `Bearer ${uni.getStorageSync('auth')}`,
				state: 4,
				imageList: [],
				uploadUrl: url.upload,
				reportForm: {
					reason: [],
					describes: '',
					ban: '',
					confrim: '',
					source: 1,
				},
				ban: [{
					text: '拉黑被举报用户账号',
					value: 1
				}],
				confirm: [{
					text: '已确认上述举报内容属实',
					value: 1
				}],
				reasons: [{
					text: '政治',
					value: '政治'
				}, {
					text: '色情',
					value: '色情'
				}, {
					text: '诈骗',
					value: '诈骗'
				}, {
					text: '侵权',
					value: '侵权'
				}, {
					text: '诋毁辱骂',
					value: '诋毁辱骂'
				}, {
					text: '广告拉人',
					value: '广告拉人'
				}, {
					text: '扰乱平台秩序',
					value: '扰乱平台秩序'
				}, {
					text: '其他原因',
					value: '其他原因'
				}]
			};
		},
		onLoad(param) {
			this.reportId = param.uid
		},
		components: {
			imgUpload: imgUpload
		},
		methods: {
			uploadSuccess(res) {
				if (res.statusCode === 200) {
					const result = JSON.parse(res.data)
					this.imageList.push(result.data)
					console.log(result)
				}
			},
			uploadFail(e) {
				uni.showToast({
					title: '错误',
					text: '上传图片失败'
				})
			},
			imgDelete(e) {
				this.imageList = []
			},
			submit() {
				request(url.report, 'POST', {
					informedUid: this.reportId || '1',
					reason: this.reportForm.reason.join(','),
					describes: this.reportForm.describes.toString(),
					image: this.imageList[0]
				}).then(res => {
					if (res.status === 200) {
						uni.showToast({
							title: '举报成功',
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateBack()
						}, 2000);
					} else {
						uni.showToast({
							title: '举报失败，请稍后重试',
							icon: 'none'
						});
					}
				})
			},
		}
	}
</script>

<style lang="less">
	* {
		box-sizing: border-box;
	}

	.container {
		padding: 10px;
		padding-top: 0;
		background-color: #fff;

		/deep/ .uni-data-checklist .checklist-group {
			display: block;
		}

		/deep/ .uni-forms-item {
			display: block;
		}

		/deep/ .uni-data-checklist .checklist-group .checklist-box {
			padding: 10px;
		}

		/deep/ .uni-forms-item__label {
			width: 100%;
			padding-left: 10px;
			padding-top: 10px;
		}

		.example-body {
			padding: 0 10px 0 10px;
		}

	}
</style>
